<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#DIV {
				margin-top: 110px;
				width: 1350px;
				height: 480px;
				margin-top: 20px;
				background: url(img/07.jpg) no-repeat left center;
			}

			#Div {
				float: right;
				background-color: #FFFFFF;
				margin-top: 20px;
				width: 346px;
				height: 400px;
				margin-right: 180px;
				border: solid 1px lightgray;
			}

			#div1 {}

			#div1-1 {
				margin-top: -12px;
				width: 346px;
				height: 39px;
				background-color: #fff8f0;
			}

			#div1-1 img {
				float: left;
				margin: 12px 5px;
				line-height: 39px;
				padding-left: 20px;
			}

			#div1-1 p {
				font-size: 12px;
				line-height: 40px;
			}

			#div1-2 {
				width: 346px;
				height: 55px;
				line-height: 55px;

			}

			#div1-2 a {
				height: 55px;
				line-height: 55px;
				font-weight: bold;
				font-size: 18px;
				width: 173px;
				margin: 18px 20px;
			}

			#div2 {
				widows: 346px;
				height: 255px;
				border-bottom: solid #D3D3D3 1px;
				border-top: solid #D3D3D3 1px;
			}

			#div2-1 {
				widows: 306px;
				background: url(img/02.png) no-repeat left center;
				margin-left: 20px;
				line-height: 38px;
				margin-top: 35px;
			}

			#div2-1 input {
				width: 265px;
				height: 38px;
				margin-left: 38px;
			}

			#div2-2 {
				width: 306px;
				background: url(img/03.png) no-repeat;
				left center;
				margin-left: 20px;
				line-height: 38px;
				margin-top: 20px;
			}

			#div2-2 input {
				width: 266px;
				height: 38px;
				margin-left: 38px
			}

			#div2-3 {
				margin-top: 20px;
			}

			#div2-3 a {
				font-size: 12px;
				float: right;
				margin-right: 20px;
			}

			#div2-4 input {
				width: 300px;
				height: 35px;
				font-size: 20px;
				margin-top: 25px;
				line-height: 35px;
				margin-left: 20px;
				color: floralwhite;
				text-align: center;
				background: crimson;
				border: 1px solid #e85356
			}

			#div3 {
				background-color: #fcfcfc;
				width: 346px;
				height: 51px;
			}

			#div3 span {
				margin-left: 20px;
				margin-top: 20px;
				float: left;
			}

			#div3 img {
				padding-right: 5px;
				margin-top: 20px;
				margin-left: 20px;
				float: left;
				width: 20px;
				height: 20px;
			}

			#QQ {
				line-height: 60px;
				float: left;
				font-size: 12px;
			}

			#WX {
				line-height: 60px;
				float: left;
				font-size: 12px;
			}

			#ZC {
				margin-top: -35px;
				height: 51px;
				float: right;
				line-height: 51px;
				margin-right: 20px;
			}

			.qq {
				background: url(img/04.png) no-repeat left center;
				width: 20px;
				height: 20px;
			}

			.wx {
				background: url(img/05.png) no-repeat left center;
				width: 20px;
				height: 20px;
			}

			.qc {
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="DIV">
			<div id="Div">
				<div id="div1">
					<div id="div1-1">
						<img src="img/01.png">
						<p>京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
					</div>
					<div id="div1-2">
						<a href="#">扫码登录</a>
						<span>|</span>
						<a href="#" style="color:#e4393c;">账户登录</a>
					</div>
				</div>
				<form>
					<div id="div2">
						<div id="div2-1">
							<input id="input-1" type="text" placeholder="邮箱/用户名/登录手机" />
						</div>

						<div id="div2-2">
							<input id="input-2" type="password" placeholder="密码" />
						</div>
						<div id="div2-3">
							<a href="#">忘记密码</a>
						</div>
						<div id="div2-4">
							<input type="button" id="input-3" value="登&emsp;录" />
						</div>
					</div>
				</form>
				<div id="div3">
					<img src="img/04.png">
					<a id="QQ" href="#">QQ</a>
					<span>|</span>
					<img src="img/05.png">
					<a id="WX" href="#">微信</a>
					<img src="img/06.png" style="margin-left:82px;">
					<a id="ZC" href="#" style="color:#b61d1d;">立即注册</a>
				</div>
			</div>
			<p class="qc"></p>
		</div>
	</body>
	<script>
		document.getElementById('input-3').addEventListener('click', function() {
			let username = document.getElementById('input-1').value;
			let password = document.getElementById('input-2').value;

			localStorage.setItem('username', username);
			
			localStorage.setItem('password', password);
		});
		window.onload = function() {
			
			document.getElementById('input-1').value = localStorage.getItem('username');
			
			document.getElementById('input-2').value = localStorage.getItem('password');
		}
	</script>
</html>
